<template>
    <el-form :disabled="disabled">
        <el-form-item label="社团名">
            <el-input v-model="data.name"></el-input>
        </el-form-item>
        <el-form-item label="主题色">
            <el-color-picker v-model="data.primary_color"></el-color-picker>
        </el-form-item>
        <el-form-item label="社团地址">
            <el-input v-model="data.address"></el-input>
        </el-form-item>
        <el-form-item label="社团位置">
            <el-input v-model="data.location"></el-input>
        </el-form-item>
        <el-form-item label="社团介绍">
            <el-input v-model="data.introduction"></el-input>
        </el-form-item>
        <el-form-item label="社团图标">
            <asset-display v-if="display" v-model:data="favicon" :enableUpload="true"></asset-display>
        </el-form-item>
    </el-form>
</template>

<script lang="ts">
import { IAssetsModel } from '@/headers/admin/model.h';
import { ICreateClubReq } from '@/headers/admin/reqs.h'
import {defineComponent, PropType, reactive, ref, watch} from 'vue'
import AssetDisplay from './AssetDisplay.vue';
export interface IClubFormProps {
    data:Partial<ICreateClubReq>,
    disabled:boolean,
    faviconData?:IAssetsModel
}
export default defineComponent({
    components:{
        AssetDisplay
    },
    props:{
        data:{
            type:Object as PropType<ICreateClubReq>,
            required:false,
            default(){
                return {
                    name:"",
                    primary_color:"#FFF",
                    address:"",
                    location:"",
                    introduction:"",
                }
            }
        },
        faviconData:{
            type:Object as PropType<IAssetsModel>,
            required:false
        },
        disabled:{
            type:Boolean,
            required:false,
            default:false
        }
    },
    emits:["update:data","update:faviconData"],
    setup(props:IClubFormProps,ctx) {
        const dataRef = ref(props.data);
        const favicon = ref<IAssetsModel|null>(props.faviconData??null);
        const display = ref(true);
        watch(props.data,()=>{
          console.log('updae')
          display.value = false;
          setTimeout(()=>display.value = true);
        })
        watch(favicon,(data)=>{
            if(!data)return;
            ctx.emit('update:data',{
                ...dataRef.value,
                favicon_id:data.id
            });

            ctx.emit('update:faviconData',data)
        },{deep:true});
        return {
            favicon,
          display
        }

    },
})
</script>
